<script>
import Layout from "../../layouts/main";
import PageHeader from "@/components/page-header";
// import Sources from "./sources";
// import RevenueLocation from "./revenue-location";
// import Chat from "./chat";
import Transaction from "./transaction";
import Multiselect from "vue-multiselect";
import { required, minLength } from "vuelidate/lib/validators";
/**
 * Dashboard component
 */
export default {
  components: {
    Layout,

    // Sources,
    // RevenueLocation,
    // Chat,
    Transaction,
    Multiselect,
    PageHeader,
  },
  data() {
    return {
      showModal: false,
      title: "信源管理",
      items: [
        {
          text: "Nazox",
        },
        {
          text: "Dashboard",
          active: true,
        },
      ],
      // 7天内信源失效率走势
      splineAreaChart: {
        series: [
          {
            name: "资讯信源",
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: "招标信源",
            data: [220, 182, 191, 234, 290, 330, 310],
          },
          {
            name: "政策信源",
            data: [150, 232, 201, 154, 190, 330, 410],
          },
          {
            name: "工商信源",
            data: [320, 332, 301, 334, 390, 330, 320],
          },
          {
            name: "搜索引擎",
            data: [820, 932, 901, 934, 1290, 1330, 1320],
          },
        ],
        chartOptions: {
          legend: {
            show: true,
            position: "top",
            horizontalAlign: "center",
          },
          chart: {
            stacked: false,
            toolbar: {
              show: false,
            },
          },
          dataLabels: {
            enabled: false,
          },
          stroke: {
            curve: "straight",
            width: 3,
          },
          colors: [
            "rgb(84, 112, 198)",
            "rgb(145, 204, 118)",
            "rgb(250, 200, 88)",
            "rgb(238, 102, 102)",
            "rgb(115, 192, 222)",
          ],
          xaxis: {
            categories: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          },
          grid: {
            borderColor: "#f1f1f1",
          },
        },
      },
      selmenu: "数据采集状态",
      SecondarymenuList: [
        {
          name: "数据采集状态",
          icon: "el-icon-coin",
        },
        {
          name: "数据标记状态",
          icon: "el-icon-price-tag",
        },
        {
          name: "计算资源状态",
          icon: "el-icon-position",
        },
      ],

      // 状态类型筛选
      typesubmit: false,
      statesType: [
        {
          name: "种子失效率",
          index: 1,
        },
        {
          name: "日采集量",
          index: 2,
        },
        {
          name: "全部数量",
          index: 3,
        },
        {
          name: "种子增量",
          index: 4,
        },
        {
          name: "站点增量",
          index: 5,
        },
      ],
      statesTypeChange: 1,
      // 时间筛选
      timeFrame: [
        {
          days: "7天",
          index: 1,
        },
        {
          days: "15天",
          index: 2,
        },
        {
          days: "30天",
          index: 3,
        },
      ],
      timeChange: 1,
      // 站点筛选
      allSite: [
        {
          name: "全部",
          index: 1,
        },
        {
          name: " 资讯信源",
          index: 2,
        },
        {
          name: "招标信源",
          index: 3,
        },
        {
          name: "政策信源",
          index: 4,
        },
        {
          name: "工商信源",
          index: 5,
        },
        {
          name: "证券",
          index: 6,
        },
      ],
      siteChange: 1,
      //类型筛选
      states: [
        {
          type: "全部",
          index: 1,
        },
        {
          type: "正常",
          index: 2,
        },
        {
          type: "异常",
          index: 3,
        },
        {
          type: "停止",
          index: 4,
        },
      ],
      stateChange: 1,
      // 展示全部
      allShow: true,
      // 下拉框选项
      options: ["在业/存续", "清算", "迁入", "迁出", "停业", "撤销"],
      options2: ["客户一", "客户二", "客户三"],
      options3: ["高级", "中级", "低级"],
      value1: null,
      value2: null,
      value3: null,
      //扩展信息默认填充
      extendInfo: {
        web: "",
        rp: "",
        sponsor: "",
        sponsorNmae: "",
        industry: "",
        address: "",
        location: "",
        record: "",
        textarea: "",
      },
      // 基本信息
      basicContent: {
        name: "",
        address: "",
      },
      submit: false,
    };
  },
  validations: {
    basicContent: {
      name: { required, minLength: minLength(6) },
      address: { required },
    },
  },
  methods: {
    //类型筛选
    statesTypeItem(item) {
      this.statesTypeChange = item.index;
      console.log(this.statesTypeChange);
    },
    //时间筛选
    timeTitle(item) {
      this.timeChange = item.index;
    },
    //站点筛选
    allSites(item) {
      this.siteChange = item.index;
    },
    //类型筛选
    statesItem(item) {
      this.stateChange = item.index;
    },
    // 展示全部
    allShowIsActive() {
      this.allShow = true;
    },
    hideShowIsActive() {
      this.allShow = false;
    },
    // 添加信源自动填充
    fillExtend() {
      this.extendInfo.web = "默认logo....";
      this.extendInfo.rp = "默认rp...";
      this.extendInfo.sponsor = "默认主半单位...";
      this.extendInfo.sponsorNmae = "默认主办单位名称...";
      this.extendInfo.industry = "默认行业...";
      this.extendInfo.address = "默认地址...";
      this.extendInfo.location = "默认归属地...";
      this.extendInfo.record = "默认备案号...";
      this.extendInfo.textarea = "默认输入内容......................";
    },
    // 提交数据
    submitContent() {
      // this.showModal = false;
      this.extendInfo.web = "";
      this.extendInfo.rp = "";
      this.extendInfo.sponsor = "";
      this.extendInfo.sponsorNmae = "";
      this.extendInfo.industry = "";
      this.extendInfo.address = "";
      this.extendInfo.location = "";
      this.extendInfo.record = "";
      this.extendInfo.textarea = "";
    },
    rangeform() {
      this.submit = true;
      // stop here if form is invalid
      this.$v.$touch();
    },
    // 跳转添加信源
    addSeed() {
      this.$router.push({
        name: "AddSeed",
      });
    },
 
  },
  computed: {},
};
</script>

<template>
  <Layout>
    <div>
      <PageHeader :title="title" />
      <div>
        <div class="card col-12 seedbody card-body seedfrist">
          <div class="count">
            <span class="title">信源状态走势统计</span
            ><span class="zhankai"
              ><img
                src="@/assets/images/seed/zhankai.png"
                alt=""
                @click="allShowIsActive" /><img
                src="@/assets/images/seed/shousuo.png"
                @click="hideShowIsActive"
                alt=""
            /></span>
          </div>
          <div v-show="allShow">
            <div class="states-type">
              <span class="type-title">状态类型:</span>
              <b-badge
                variant="light"
                class="states-type-item"
                :class="{ isActive: statesTypeChange == item.index }"
                v-for="item in statesType"
                :key="item.index"
                @click="statesTypeItem(item)"
                >{{ item.name }}</b-badge
              >
            </div>
            <div class="states-time">
              <span class="time-title">时间范围:</span>
              <b-badge
                variant="light"
                class="states-time-item"
                :class="{ isActive: timeChange == item.index }"
                @click="timeTitle(item)"
                v-for="item in timeFrame"
                :key="item.index"
                >{{ item.days }}</b-badge
              >
            </div>
            <div class="sparklines">
              <div>7天内信源失效率走势</div>
              <apexchart
                class="apex-charts"
                height="350"
                type="area"
                dir="ltr"
                :series="splineAreaChart.series"
                :options="splineAreaChart.chartOptions"
              ></apexchart>
            </div>
          </div>
        </div>
        <div class="card col-12 seedbody card-body">
          <div class="all-products">全部信息</div>
          <div class="states-type">
            <span class="type-title">全部类型:</span>
            <b-badge
              variant="light"
              class="states-type-item"
              :class="{ isActive: siteChange == item.index }"
              v-for="item in allSite"
              :key="item.index"
              @click="allSites(item)"
            >
              {{ item.name }}</b-badge
            >
          </div>
          <div class="states-time">
            <div class="ad">
              <b-button variant="danger" style="margin-right: 20px" size="sm">
                <i class="ri-close-line align-middle mr-1"></i> 批量删除
              </b-button>
              <b-button variant="primary" size="sm" @click="addSeed">
                <i class="ri-add-line align-middle mr-1"></i>添加信源
              </b-button>
            </div>
            <div>
              <span class="time-title">全部状态:</span>
              <b-badge
                variant="light"
                class="states-time-item"
                v-for="item in states"
                :class="{ isActive: stateChange == item.index }"
                :key="item.index"
                @click="statesItem(item)"
                >{{ item.type }}</b-badge
              >
            </div>
          </div>
        </div>
      </div>

      <Transaction />
      <b-modal v-model="showModal" title="添加信源" centered size="lg">
        <form @submit.prevent="rangeform" id="addxinyuan">
          <div class="basic-content">
            <div class="form-group">
              <span class="basic-title">基本信息</span>
            </div>
            <div class="form-group">
              <div>
                <b-form-input
                  for="text"
                  v-model="basicContent.name"
                  placeholder="信源名称*(必填)"
                  trim
                  :class="{
                    'is-invalid': submit && $v.basicContent.name.$error,
                  }"
                ></b-form-input>
                <div
                  v-if="submit && $v.basicContent.name.$error"
                  class="invalid-feedback"
                >
                  <span v-if="!$v.basicContent.name.required"
                    >该值是必需的。</span
                  >
                  <span v-if="!$v.basicContent.name.minLength"
                    >这个值太短了。它应该有 6 个字符或更多。</span
                  >
                </div>
              </div>

              <b-form-input
                for="text"
                trim
                v-model="basicContent.address"
                placeholder="信源网址*(必填)"
              ></b-form-input>
            </div>
            <div class="form-group duoxuan">
              <multiselect
                v-model="value1"
                :options="options"
                :multiple="true"
                placeholder="信源类型*(必填,可填写多个)"
              ></multiselect>
              <multiselect
                v-model="value2"
                :options="options"
                :multiple="true"
                placeholder="客户标签*(可填写多个)"
              ></multiselect>
            </div>
            <div class="form-group">
              <multiselect
                v-model="value3"
                :options="options3"
                placeholder="优先级"
              ></multiselect>
              <b-form-input
                for="text"
                value=""
                placeholder="权重网站"
                trim
              ></b-form-input>
            </div>
          </div>
          <div class="extend-content">
            <div class="form-group">
              <span class="extend-title">扩展信息</span>
              <div>
                <b-button variant="light" size="sm" @click="fillExtend"
                  >自动填充</b-button
                >
              </div>
            </div>
            <div class="form-group">
              <b-form-input
                for="text"
                placeholder="网站logo"
                v-model="extendInfo.web"
                trim
              ></b-form-input>
              <b-form-input
                for="text"
                v-model="extendInfo.rp"
                placeholder="信源PR值"
                trim
              ></b-form-input>
            </div>
            <div class="form-group">
              <b-form-input
                for="text"
                v-model="extendInfo.sponsor"
                placeholder="主办单位性质"
                trim
              ></b-form-input>
              <b-form-input
                for="text"
                v-model="extendInfo.sponsorName"
                placeholder="主办单位名称"
                trim
              ></b-form-input>
            </div>
            <div class="form-group">
              <b-form-input
                for="text"
                v-model="extendInfo.industry"
                placeholder="所属行业"
                trim
              ></b-form-input>
              <b-form-input
                for="text"
                v-model="extendInfo.address"
                placeholder="主办单位注册地址"
                trim
              ></b-form-input>
            </div>
            <div class="form-group">
              <b-form-input
                for="text"
                v-model="extendInfo.location"
                placeholder="所属行业"
                trim
              ></b-form-input>
              <b-form-input
                for="text"
                v-model="extendInfo.record"
                placeholder="备案号"
                trim
              ></b-form-input>
            </div>
            <div class="form-group">
              <textarea
                v-model="extendInfo.textarea"
                class="form-control"
                name="textarea"
                :class="{
                  'is-invalid': typesubmit && $v.typeform.textarea.$error,
                }"
                rows="5"
              ></textarea>
            </div>
          </div>
        </form>

        <template v-slot:modal-footer>
          <div class="tijiao">
            <div>
              <b-button
                @click="submitContent"
                type="submit"
                form="addxinyuan"
                variant="primary"
                >提交数据</b-button
              >
            </div>
            <div>
              <b-button class="btn btn-primary" variant="primary">
                添加种子
              </b-button>
            </div>
          </div>
        </template>
      </b-modal>
    </div>
  </Layout>
</template>
<style lang="scss" scoped>
.seedTitle {
  font-size: 15px;
  color: #000000;
  font-weight: 600;
}
input,
.multiselect {
  width: 350px;
  height: 40px;
}
input {
  // border: 1px solid #ced4da !important;
  outline: none;
  border-radius: 5px;
}
.duoxuan {
  display: flex;
  justify-content: space-between;
}
.tijiao {
  width: 200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.form-group {
  display: flex;
  justify-content: space-between;
  margin-left: 10px;
  margin-right: 10px;
  input {
    &:nth-child(2) {
      float: right;
    }
  }
  .basic-title,
  .extend-title {
    display: inline-block;
    border-bottom: 1px solid #bbb;
    font-size: 16px;
  }
}
.isActive {
  color: #fff;
  background-color: #5664d2;
}
.seedfrist {
  margin-top: 0px !important;
}
.seedbody {
  margin-bottom: 0px;
}
// 走势图
.sparklines {
  margin-top: 20px;
  font-size: 17px;
  color: #343a40;
}
.count {
  .title {
    font-size: 15px;
    font-weight: bold;
  }
  .zhankai {
    float: right;
    img {
      vertical-align: middle;
      width: 20px;
      padding-right: 10px;
    }
  }
}
.all-products {
  font-size: 15px;
  font-weight: bold;
  margin-top: 20px;
}
.states-type {
  margin-top: 20px;
  .type-title {
    display: inline-block;
    font-size: 15px;
  }
  .states-type-item {
    font-size: 15px;
    padding: 5px 25px;
    margin: 0 10px;
    font-weight: 400;
    border-radius: 4px;
    &:hover {
      cursor: pointer;
    }
  }
}
.states-time {
  margin-top: 20px;
  .ad {
    float: right;
  }
  .time-title {
    display: inline-block;
    font-size: 15px;
  }
  .states-time-item {
    font-size: 15px;
    padding: 5px 20px;
    margin: 0 10px;
    font-weight: 400;
    &:hover {
      cursor: pointer;
    }
  }
}
.card-body {
  margin-top: 20px;
}
</style>